<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>role</title>
    <link rel="stylesheet" th:href="@{css/role.css}">
</head>
<body>
<div>
    <button class="addrole">添加</button>
</div>
<div class="addroleForm" style="display: none">
    <form>
        <div>
            <input type="text" class="roleId" name="roleId" placeholder="角色编号">
        </div>
        <div>
            <input type="text" class="name" name="name" placeholder="角色名称">
        </div>
        <div>
            <input type="text" class="description" name="description" placeholder="角色描述">
        </div>
        <div>
            <button class="addrolebtn">确定</button>
            <button class="retrolebtn">返回</button>
        </div>
    </form>
</div>


<!--显示所有的角色-->
<div class="loadRole">
    <table class="roleTable">
        <thead>
          <tr>
            <th>角色编号</th>
            <th>角色名称</th>
            <th>角色描述</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
        <tr th:each="role:${roles}">
            <td class="roleId1" th:text="${role.roleId}"></td>
            <td class="name1" th:text="${role.name}"></td>
            <td class="description1" th:text="${role.description}"></td>
            <td>
                <button class="modRole"  th:data-roleId="${role.roleId}">修改</button>
                <button class="delRole"  th:data-roleId="${role.roleId}">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<!--修改角色内容-->
<div class="moddiv">
</div>
</div><script type="text/javascript" th:src="@{jquery-3.5.0.min.js}"></script>
<script type="text/javascript" th:src="@{js/role.js}"></script>
</body>
</html>